<template>
  <div>
    <div class="modules-section" v-if="moduleBtns.length">
      <h4 class="module-name">组件模块</h4>
      <div class="btn-groups">
        <div
          class="btn-item"
          v-for="(btn, index) in moduleBtns"
          :key="index"
          :style="btn.css"
          @click="changeModule(btn)"
        >
          {{ btn.text }}
        </div>
      </div>

      <div class="module-collapse">
        <a-collapse v-model="activeModuleBtns" :bordered="false">
          <template #expandIcon="props">
            <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
          </template>

          <a-collapse-panel
            v-for="collapse in moduleBtns"
            :key="collapse.targetIndex"
            :header="collapse.text"
            :style="customStyle"
          >
            <div class="module-group" v-if="collapse.content && collapse.content.length">
              <div
                class="module-item"
                :class="collapse.activeModule == i ? 'active-module' : ''"
                v-for="(item, i) in collapse.content"
                :key="i"
                @click="handleModuleItem(collapse, item, i)"
                :draggable="isDraggable"
                @dragend="dragend(item)"
                @dragstart="dragstart(item)"
                :data-item="item"
                @dragover.prevent
              >
                <i class="iconfont" :class="item.icon"></i>
                <p>{{ item.name }}</p>
              </div>
            </div>
            <a-empty v-else />
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
    <!-- 空状态 -->
    <a-empty v-else />
  </div>
</template>

<script>
import { BaseModules, productModules, marketModules } from '@/components/DiyNew/diy/dataConfig/config.js'

export default {
  name: '',
  props: {},
  data() {
    return {
      moduleBtns: [
        {
          text: '基础',
          css: {
            backgroundColor: '#F8704B',
          },
          targetIndex: '0',
          type: 'default',
          content: BaseModules,
          activeModule: -1,
        },
        {
          text: '产品',
          css: {
            backgroundColor: '#5B89FC',
          },
          targetIndex: '1',
          type: 'product',
          content: productModules,
          activeModule: -1,
        },
        {
          text: '营销',
          css: {
            backgroundColor: '#20C4CC',
          },
          targetIndex: '2',
          type: 'marketing',
          content: marketModules,
          activeModule: -1,
        },
        // {
        //   text: "高级",
        //   css: {
        //     backgroundColor: "#A9BA74",
        //   },
        //   targetIndex: "3",
        //   type: "senior",
        // },
      ],

      activeModuleBtns: '0', // 当前展开的组件模块
      customStyle: 'background: #ffffff;border-radius: 4px;border: 0;overflow: hidden',
    }
  },
  watch: {},
  computed: {
    currentPage() {
      return this.$diyObser.store.currentPage
    },
    isDraggable() {
      let flag = true
      if (this.currentPage?.page_type) {
        flag = false
      }
      return flag
    },
  },
  methods: {
    // 点击切换展开的组件模块
    changeModule(item) {
      console.log(item)
      this.activeModuleBtns = String(item.targetIndex)
    },
    // 点击模块
    handleModuleItem(collapse, item, i) {
      collapse.activeModule = i
      console.log(item, this.currentPage)
      if (this.currentPage.page_type == 1) return
      if (item.comName == 'productClassify') {
        let hasCom = this.currentPage.templates.some((d) => {
          return d.comName == 'productClassify'
        })
        console.log('有没有分类了', hasCom)
        if (hasCom) {
          this.$message.warning('商品分类只可添加一个哦！')
          return
        }
      }
      this.$emit('addModule', { item })
    },
    dragstart(item) {
      this.$diyObser.mutations.setDragItem(item)
    },
    dragend(item) {
      console.log(item)
      this.$diyObser.mutations.setDragItem(null)
    },
  },
}
</script>

<style lang="scss" scoped>
.modules-section {
  width: 100%;
  .module-name {
    width: 100%;
    height: 60px;
    background: #ffffff;
    padding: 24px 24px 14px 24px;
    font-size: 16px;
    color: #000000;
    margin: 0;
  }
  .btn-groups {
    padding: 8px 24px 5px 24px;
    display: flex;
    flex-wrap: wrap;

    .btn-item {
      width: 64px;
      height: 44px;
      border-radius: 4px;
      text-align: center;
      line-height: 44px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      margin-right: 8px;
      cursor: pointer;
    }
    .btn-item:last-child {
      margin-right: 0;
    }
  }
  .module-collapse {
    padding: 0 7px;
    >>> .ant-collapse > .ant-collapse-item > .ant-collapse-header {
      cursor: pointer;
      user-select: none;
    }
    .module-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .module-item {
        width: 88px;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 2px;
        .iconfont {
          font-size: 20px;
        }
        p {
          margin: 0;
          font-size: 12px;
          font-weight: 400;
          color: #000000;
        }
      }
      .module-item:hover {
        background: #eaf5ff;
        border-radius: 4px;
        color: #1890fc;
        p {
          color: #1890fc;
        }
      }
    }
  }
}
</style>
